<template>
    <div ref="chartRef" style="width: 100%; height: 100%"></div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, watch, PropType } from "vue";
import * as echarts from "echarts/core";
import {
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    GeoComponent,
} from "echarts/components";
import { ScatterChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import { registerMap } from "echarts";
import { post } from "../../../api/request";

import xn from "../../../assets/xn.json"; // 确保路径正确

echarts.use([
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    GeoComponent,
    ScatterChart,
    CanvasRenderer,
]);

export default defineComponent({
    props: {
        listDataProp: {
            type: Array as PropType<
                Array<{ lat: number; lon: number; type: string }>
            >,
            required: true,
        },
    },

    setup() {
        const chartRef = ref<HTMLElement | null>(null);
        let myChart: echarts.ECharts | null = null;

        let datalist = [];

        onMounted(() => {
            post({
                url: "/api/Hut/ditu",
                data: {},
            }).then((res: any) => {
                res.hut.forEach((item: any, index: number) => {
                    let obj = {
                        name:
                            item.area == "大通县"
                                ? "大通回族土族自治县"
                                : item.area,
                        value: {
                            hut: item.value,
                            enterprise: res.enterprise[index].value,
                        },
                    };
                    datalist.push(obj);

                    if (chartRef.value) {
                        myChart = echarts.init(chartRef.value);
                        registerMap("xn", xn);
                        const option = {
                            tooltip: {
                                trigger: "item",
                                formatter: function (params: any) {
                                    const { name } = params;
                                    console.log(params)
									return `${name}<br/>回收企业: <span>${params.data.value.enterprise}家<span><br/>回收站点: <span>${params.data.value.hut}家<span>`;
                                },
                            },
                            geo: [
                                {
                                    layoutCenter: ["50%", "50%"], //位置
                                    layoutSize: "120%", //大小
                                    show: true,
                                    map: "xn",
                                    roam: false,
                                    zoom: 0.65,
                                    aspectScale: 1,
                                    label: {
                                        normal: {
                                            show: true,
                                            textStyle: {
                                                color: "#fff",
                                            },
                                        },
                                        emphasis: {
                                            show: true,
                                            textStyle: {
                                                color: "#fff",
                                            },
                                        },
                                    },
                                    itemStyle: {
                                        normal: {
                                            areaColor: {
                                                type: "linear",
                                                x: 1000,
                                                y: 0,
                                                x2: 0,
                                                y2: 0,
                                                colorStops: [
                                                    {
                                                        offset: 0,
                                                        color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                                                    },
                                                ],
                                                global: true, // 缺省为 false
                                            },
                                            borderColor: "#c0f3fb",
                                            borderWidth: 1,
                                            shadowColor: "#8cd3ef",
                                            shadowOffsetY: 10,
                                            shadowBlur: 120,
                                        },
                                        emphasis: {
                                            areaColor: "rgba(0,254,233,0.6)",
                                            // borderWidth: 0
                                        },
                                    },
                                },
                                {
                                    type: "map",
                                    map: "xn",
                                    zlevel: -1,
                                    aspectScale: 1,
                                    zoom: 0.65,
                                    layoutCenter: ["50%", "51%"],
                                    layoutSize: "120%",
                                    roam: false,
                                    silent: true,
                                    itemStyle: {
                                        normal: {
                                            borderWidth: 1,
                                            // borderColor:"rgba(17, 149, 216,0.6)",
                                            borderColor: "rgba(58,149,253,0.8)",
                                            shadowColor:
                                                "rgba(172, 122, 255,0.5)",
                                            shadowOffsetY: 5,
                                            shadowBlur: 15,
                                            areaColor: "rgba(5,21,35,0.1)",
                                        },
                                    },
                                },
                                {
                                    type: "map",
                                    map: "xn",
                                    zlevel: -2,
                                    aspectScale: 1,
                                    zoom: 0.65,
                                    layoutCenter: ["50%", "52%"],
                                    layoutSize: "120%",
                                    roam: false,
                                    silent: true,
                                    itemStyle: {
                                        normal: {
                                            borderWidth: 1,
                                            // borderColor: "rgba(57, 132, 188,0.4)",
                                            borderColor: "rgba(58,149,253,0.6)",
                                            shadowColor: "rgba(65, 214, 255,1)",
                                            shadowOffsetY: 5,
                                            shadowBlur: 15,
                                            areaColor: "transpercent",
                                        },
                                    },
                                },
                                {
                                    type: "map",
                                    map: "xn",
                                    zlevel: -3,
                                    aspectScale: 1,
                                    zoom: 0.65,
                                    layoutCenter: ["50%", "53%"],
                                    layoutSize: "120%",
                                    roam: false,
                                    silent: true,
                                    itemStyle: {
                                        normal: {
                                            borderWidth: 1,
                                            // borderColor: "rgba(11, 43, 97,0.8)",
                                            borderColor: "rgba(58,149,253,0.4)",
                                            shadowOffsetY: 15,
                                            shadowBlur: 10,
                                            areaColor: "transpercent",
                                        },
                                    },
                                },
                                {
                                    type: "map",
                                    map: "xn",
                                    zlevel: -4,
                                    aspectScale: 1,
                                    zoom: 0.65,
                                    layoutCenter: ["50%", "54%"],
                                    layoutSize: "120%",
                                    roam: false,
                                    silent: true,
                                    itemStyle: {
                                        normal: {
                                            borderWidth: 5,
                                            // borderColor: "rgba(11, 43, 97,0.8)",
                                            borderColor: "rgba(5,9,57,0.8)",
                                            shadowColor:
                                                "rgba(29, 111, 165,0.8)",
                                            shadowOffsetY: 15,
                                            shadowBlur: 10,
                                            areaColor: "rgba(5,21,35,0.1)",
                                        },
                                    },
                                },
                            ],
                            series: [
                                {
                                    name: "区域数据",
                                    type: "map",
                                    map: "xn",
                                    aspectScale: 1,
                                    zoom: 0.65,
                                    layoutCenter: ["50%", "50%"],
                                    layoutSize: "120%",
                                    roam: false,
                                    data: datalist, // 初始化时使用 props 中的数据
                                    itemStyle: {
                                        normal: {
                                            areaColor: "transparent", // 使地图透明
                                            borderColor: "rgba(58,149,253,0.4)",
                                            borderWidth: 0,
                                            // ... 其他样式
                                        },
                                    },
                                },
                            ],
                            // 其他 option 配置...
                        };

                        myChart.setOption(option);

                        setTimeout(() => {
                            myChart.resize();
                        }, 500);
                        window.addEventListener("resize", () =>
                            myChart.resize()
                        );
                    }
                });
            });
        });

        return {
            chartRef,
        };
    },
});
</script>
